<template>
  <div>
    <!-- 需求：点击文章列表项，跳转到详情页 -->
    <van-cell>
      <!-- 标题区域的插槽 -->
      <template #title>
        <div class="
              title-box">
          <!-- 标题 -->
          <span>{{obj.title}}</span>
          <!-- 图片和标题在同一个div里，并且 title-box还设置了弹性布局，因此可以把图片位置和标题并列排列 -->
          <img v-lazy="obj.cover.images[0]"
               v-if="obj.cover.type===1"
               class="thumb">
        </div>
        <!-- 放三张图片的位置，因为在头部的下面，在label的上面，
又在插槽中，因此不能写在  </template>标签的外面 -->
        <div class="thumb-box"
             v-if="obj.cover.type>1">
          <img class="thumb"
               v-for="arr,index in obj.cover.images"
               v-lazy="arr"
               :key="index">
        </div>
      </template>
      <!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
          <span>{{`${obj.aut_name} ${obj.comm_count}评论 ${obj.pubdate}`}}</span>
          <!-- 关闭按钮 -->
          <van-icon name="cross"
                    v-if="show"
                    @click.stop="btn(obj.art_id)" />
          <!-- click.stop阻止事件冒泡 -->
        </div>
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  props: {
    obj: Object, // 文章对象
    show: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    btn (art_id) {
      this.$emit('close', art_id)
    }
  }
}
</script>

<style lang="less" scoped>
.title-box {
  // 标题样式
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.label-box {
  // label样式
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.thumb {
  width: 113px;
  height: 70px;
  background: #f8f8f8;
  object-fit: cover;
}
.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>
